/**
 * 日期选择器组件样式
 * @description 自定义日期选择器组件的样式定义
 */

.datePicker {
  /* 基础样式 */
  width: 100%;
  transition: all 0.3s ease;
}

/* 不同尺寸 */
.datePicker.small {
  font-size: 12px;
}

.datePicker.small :global(.ant-picker-input > input) {
  font-size: 12px;
}

.datePicker.large {
  font-size: 16px;
  padding: 12px 16px;
}

.datePicker.large :global(.ant-picker-input > input) {
  font-size: 16px;
}

/* 禁用状态 */
.datePicker.disabled {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  color: #bfbfbf;
  cursor: not-allowed;
}

.datePicker.disabled :global(.ant-picker-input > input) {
  color: #bfbfbf;
  cursor: not-allowed;
}

.datePicker.disabled :global(.ant-picker-suffix) {
  color: #bfbfbf;
}

/* 只读状态 */
.datePicker.readonly {
  background-color: #fafafa;
  border-color: #e8e8e8;
  cursor: default;
}

.datePicker.readonly :global(.ant-picker-input > input) {
  cursor: default;
}

.datePicker.readonly:hover {
  border-color: #e8e8e8;
}

.datePicker.readonly:focus,
.datePicker.readonly:focus-within {
  border-color: #e8e8e8;
  box-shadow: none;
}

/* 聚焦状态 */
.datePicker:focus,
.datePicker:focus-within {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  outline: none;
}

/* 悬停状态 */
.datePicker:hover {
  border-color: #40a9ff;
}

.datePicker.disabled:hover {
  border-color: #d9d9d9;
}

.datePicker.readonly:hover {
  border-color: #e8e8e8;
}

/* 输入框样式 */
.datePicker :global(.ant-picker-input) {
  display: flex;
  align-items: center;
  width: 100%;
}

.datePicker :global(.ant-picker-input > input) {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  color: inherit;
}

.datePicker :global(.ant-picker-input > input::placeholder) {
  color: #bfbfbf;
  opacity: 1;
}

/* 后缀图标样式 */
.datePicker :global(.ant-picker-suffix) {
  color: #8c8c8c;
  font-size: 14px;
  transition: color 0.3s ease;
}

.datePicker:hover :global(.ant-picker-suffix) {
  color: #40a9ff;
}

.datePicker.disabled :global(.ant-picker-suffix) {
  color: #bfbfbf;
}

/* 清除按钮样式 */
.datePicker :global(.ant-picker-clear) {
  color: #8c8c8c;
  font-size: 12px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.datePicker :global(.ant-picker-clear):hover {
  color: #ff4d4f;
  background-color: #fff2f0;
}

/* 错误状态 */
.datePicker :global(.ant-form-item-has-error) {
  border-color: #ff4d4f;
}

.datePicker :global(.ant-form-item-has-error):focus,
.datePicker :global(.ant-form-item-has-error):focus-within {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
}

/* 成功状态 */
.datePicker :global(.ant-form-item-has-success) {
  border-color: #52c41a;
}

/* 警告状态 */
.datePicker :global(.ant-form-item-has-warning) {
  border-color: #faad14;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .datePicker {
    font-size: 16px; /* 防止移动端缩放 */
  }

  .datePicker :global(.ant-picker-input > input) {
    font-size: 16px;
  }

  .datePicker.small {
    font-size: 14px;
  }

  .datePicker.small :global(.ant-picker-input > input) {
    font-size: 14px;
  }

  .datePicker.large {
    font-size: 18px;
    padding: 14px 16px;
  }

  .datePicker.large :global(.ant-picker-input > input) {
    font-size: 18px;
  }
}

/* 深色主题适配 */
[data-theme='dark'] .datePicker {
  background-color: #141414;
  border-color: #434343;
  color: #d9d9d9;
}

[data-theme='dark'] .datePicker:hover {
  border-color: #177ddc;
}

[data-theme='dark'] .datePicker:focus,
[data-theme='dark'] .datePicker:focus-within {
  border-color: #177ddc;
  box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2);
}

[data-theme='dark'] .datePicker.disabled {
  background-color: #262626;
  border-color: #434343;
  color: #595959;
}

[data-theme='dark'] .datePicker.readonly {
  background-color: #1f1f1f;
  border-color: #303030;
}

[data-theme='dark'] .datePicker :global(.ant-picker-input > input::placeholder) {
  color: #595959;
}

[data-theme='dark'] .datePicker :global(.ant-picker-suffix) {
  color: #8c8c8c;
}

[data-theme='dark'] .datePicker:hover :global(.ant-picker-suffix) {
  color: #177ddc;
}

[data-theme='dark'] .datePicker :global(.ant-picker-clear) {
  background-color: #141414;
  color: #8c8c8c;
}

[data-theme='dark'] .datePicker :global(.ant-picker-clear):hover {
  color: #ff7875;
  background-color: #2a1215;
}

/* 日期面板样式自定义 */
.datePicker :global(.ant-picker-dropdown) {
  border-radius: 8px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

[data-theme='dark'] .datePicker :global(.ant-picker-dropdown) {
  background-color: #1f1f1f;
  border-color: #434343;
}

/* 今天按钮样式 */
.datePicker :global(.ant-picker-today-btn) {
  color: #1890ff;
  font-weight: 500;
}

[data-theme='dark'] .datePicker :global(.ant-picker-today-btn) {
  color: #177ddc;
}

/* 日期单元格样式 */
.datePicker :global(.ant-picker-cell-today .ant-picker-cell-inner) {
  border-color: #1890ff;
  color: #1890ff;
}

[data-theme='dark'] .datePicker :global(.ant-picker-cell-today .ant-picker-cell-inner) {
  border-color: #177ddc;
  color: #177ddc;
}

.datePicker :global(.ant-picker-cell-selected .ant-picker-cell-inner) {
  background-color: #1890ff;
  color: #ffffff;
}

[data-theme='dark'] .datePicker :global(.ant-picker-cell-selected .ant-picker-cell-inner) {
  background-color: #177ddc;
}

/* 禁用日期样式 */
.datePicker :global(.ant-picker-cell-disabled .ant-picker-cell-inner) {
  color: #bfbfbf;
  background-color: transparent;
  cursor: not-allowed;
}

[data-theme='dark'] .datePicker :global(.ant-picker-cell-disabled .ant-picker-cell-inner) {
  color: #595959;
}

/* 动画效果 */
.datePicker {
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.datePicker :global(.ant-picker-dropdown) {
  animation: datePickerSlideIn 0.3s ease-out;
}

@keyframes datePickerSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 紧凑模式 */
.datePicker.compact {
  padding: 6px 8px;
}

.datePicker.compact :global(.ant-picker-suffix) {
  font-size: 12px;
}

/* 宽松模式 */
.datePicker.spacious {
  padding: 16px 20px;
}

.datePicker.spacious :global(.ant-picker-suffix) {
  font-size: 16px;
}